<template>
  <div :class="$options._componentTag + 'Component'">
    <el-dialog
      v-loading="dialogLoading"
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      :close-on-press-escape="false"
      :show-close="!dialogLoading"
      top="0"
      :close-on-click-modal="false"
      :before-close="handleBeforeClose"
      @closed="handleClosed">
      <div class="el-dialog-body-contant" ref="dialogBody">
        内容区域
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button :disabled="dialogLoading" @click="handleBeforeClose">取消</el-button>
        <el-button :disabled="dialogLoading" type="primary" @click="dialogVisible = false">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        dialogLoading: false,
        dialogTitle: '标题',
        dialogVisible: false
      };
    },
    methods: {
      // 初始化
      init() {
        this.dialogVisible = true;
        // this.dialogLoading = true; // 请求数据显示loading

        // 滚动条回至顶部
        this.$nextTick(() => {
          this.$refs.dialogBody.scrollTop = 0;
        });
      },
      // 关闭动画执行前的回调
      handleBeforeClose() {
        this.$confirm('此操作将关闭 Dialog, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.dialogVisible = false;
          console.log('您确定了关闭 Dialog');
        }).catch(() => {
          console.log('您取消了关闭 Dialog');
        });
      },
      // 关闭动画结束时的回调
      handleClosed() {
        console.log('Dialog 关闭动画结束时的回调');
      }
    }
  };
</script>

<style lang="less">
  @import "../assets/less/define.less";
  .RightDialogComponent {
    @dialog-width: 880px;

    .dialog-fade-enter-active {
      animation: right-dialog-fade-in 0.3s;
    }

    .dialog-fade-leave-active {
      animation: right-dialog-fade-out 0.3s;
    }

    @keyframes right-dialog-fade-in {
      0% {
        transform: translate3d(100%, 0, 0);
        opacity: 0;
      }
      100% {
        transform: translate3d(0, 0, 0);
        opacity: 1;
      }
    }

    @keyframes right-dialog-fade-out {
      0% {
        transform: translate3d(0, 0, 0);
        opacity: 1;
      }
      100% {
        transform: translate3d(100%, 0, 0);
        opacity: 0;
      }
    }

    .el-loading-mask {
      left: auto;
      top: 40px;
      bottom: 56px;
      width: @dialog-width;
    }

    .el-dialog__wrapper {
      display: flex;
      justify-content: flex-end;
    }

    .el-dialog {
      width: @dialog-width;
      margin: 0;
      border-radius: 0;

      .el-dialog__header {
        height: 40px;
        background: @color-primary;
        padding: 0 10px;
        line-height: 40px;

        .el-dialog__title {
          color: #ffffff;
          font-size: 16px;
        }

        .el-dialog__headerbtn {
          top: 8px;
          right: 10px;
          font-size: 24px;

          .el-dialog__close {
            color: #ffffff;
          }
        }
      }

      .el-dialog__body {
        height: calc(100% - 96px);
        padding: 0;

        .el-dialog-body-contant {
          height: calc(100%);
          padding: 10px;
          box-sizing: border-box;
          overflow-x: hidden;
          overflow-y: auto;
          font-size: 14px;
          color: #333333;
          line-height: 22px;
        }
      }

      .el-dialog__footer {
        height: 56px;
        background: #EBEBEB;
        padding: 0 10px;
        display: flex;
        justify-content: flex-end;

        .dialog-footer {
          display: flex;
          align-items: center;
        }

        .el-button {
          line-height: 36px;
          height: 36px;
          padding: 0 15px;
          min-width: 100px;

          span {
            font-size: 14px;
          }
        }
      }
    }
  }
</style>